<template>
  <a-modal
    :title="'绑定上下级'"
    :visible="true"
    width="60%"
    :footer="null"
    @cancel="reset"
  >
    <div class="main">
      <div style="display: flex;justify-content: flex-end;margin-bottom: 10px;">
        <a-button
          type="primary"
          @click="addChild('')"
        >添加</a-button>
      </div>
      <a-card
        v-for="item,i in backList"
        :key="i"
        :title="item.desc"
        style="margin-bottom:20px"
      >
        <template #extra>
          <div style="display:flex">
            <div @click="addChild(item)">
              <a-icon type="edit" />
            </div>
            <div
              @click="delectRecord(item)"
              style="margin-left:10px"
            >
              <a-icon type="delete" />
            </div>
          </div>
        </template>

        <a-row>
          <a-col
            :span="6"
            v-for="subitem,i in item.dictRelationDetail"
            :key="i"
            style="display:flex;justify-content:center"
          >
            <div
              class="item"
              @click="toChildDetail(subitem)"
            >
              {{ subitem.name }}
            </div>
          </a-col>
        </a-row>

      </a-card>
    </div>
    <!-- <a-row style="margin-top: 10px;">
      <a-col
        :span="16"
        :offset="8"
        class="info-action"
      >
        <a-button
          type="primary"
          class="ml-20"
          @click="submit"
        >保存</a-button>
      </a-col>
    </a-row> -->
    <child
      v-if="showChild"
      :dictItem="dictItem"
      :firstId="parentId"
      :parentDictId="parentDictId"
      @closeChild="closeChild"
    ></child>
    <childDetail
      v-if="showChildDetail"
      :childItem="childItem"
      @closeChildDetail="closeChildDetail"
    ></childDetail>

  </a-modal>
</template>
  
  <script>
import { getDictList, getDictChildList, getDictRelation, saveDictRelation } from '@api/rd/index'
import child from './child.vue'
import childDetail from './infoDetail.vue'

export default {
  components: {
    child,
    childDetail
  },

  props: {
    dict: {
      type: Object,
      default: null
    }
  },

  data() {
    return {
      id: '',
      parentList: [],
      childList: [],
      dictDetailId: [],
      parent: undefined,
      parentId: '',
      parentDictId:'',
      dictItem: {},
      childItem: {},
      dictId: '',
      showChild: false,
      showChildDetail: false,
      name: '',
      form: this.$form.createForm(this),
      selectedKeys: [],
      targetKeys: [],
      backList: []
    }
  },
  computed: {
    userInfo() {
      return this.$store.getters.userInfo || null
    }
  },
  created() {
    const { dict } = this.$props
    console.log(dict)
    if (dict) {
      this.parentId = dict.id
      this.parentDictId = dict.dictId
      this.name = dict.name
    }
    this.loadData()
  },
  methods: {
    reset() {
      this.form.resetFields()
      this.$emit('closeChild')
    },
    addChild(record) {
      this.showChild = true
      this.dictItem = record
    },
    closeChild() {
      this.showChild = false
      this.loadDetail()
    },
    toChildDetail(record) {
      this.showChildDetail = true
      this.childItem = record
    },
    closeChildDetail() {
      this.showChildDetail = false
    },
    async loadDetail() {
      const params = {
        parentDictDetailId: this.parentId,
        parentDictId:this.parentDictId
      }
      try {
        const res = await getDictRelation('dict', params)
        if (res.code == 200) {
          if (res.data.length) {
            this.backList = res.data
            this.backList.map(x => {
              this.parentList.map(y => {
                if (x.dictId == y.id) {
                  x.desc = y.description
                }
              })
            })
          }
        } else {
          this.$message.error(res.msg)
        }
      } catch (error) {
        this.$message.error('获取详情失败！')
      } finally {
        this.loadingChild = false
      }
    },
    async loadChild() {
      const params = {
        current: 1,
        name: this.parent
      }
      try {
        const res = await getDictChildList('dict', params)
        if (res.code == 200) {
          this.childList = res.data
          this.childList.map(item => {
            item.key = item.id
            item.title = item.name
            item.value = item.id
            item.disabled = false
          })
          if (this.backList.length) {
            this.backList.map(item => {
              this.targetKeys.push(item.id)
            })
            this.$nextTick(() => {
              this.dictDetailId = this.targetKeys
            })
          }
          console.log(this.targetKeys)
        } else {
          this.$message.error(res.msg)
        }
      } catch (error) {
        this.$message.error('获取数据字典子项列表失败！')
      } finally {
        this.loadingChild = false
      }
    },
    async loadData() {
      const params = {
        current: 1,
        size: 100
      }
      try {
        const res = await getDictList('dict', params)
        if (res.code == 200) {
          this.parentList = res.data.records
          this.loadDetail()
        } else {
          this.$message.error(res.msg)
        }
      } catch (error) {
        this.$message.error('获取数据字典列表失败！')
      }
    },
    async delectRecord(item) {
      const { realname } = this.userInfo
      const params = {
        dictId: item.dictId,
        parentId: this.parentId,
        operator: realname,
        dictDetailId: []
      }
      try {
        const res = await saveDictRelation('dict', params)
        if (res.code == 200) {
          this.$message.success('删除成功!')
          this.loadDetail()
        } else {
          this.$message.warning(res.msg)
        }
      } catch (error) {
        this.$message.warning('操作失败！')
      }
    }
  }
}
</script>
  
  <style scoped lang="less">
.info-action {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  // margin-bottom: 20px;
}

.ml-20 {
  margin-left: 20px;
}
.item {
  width: 80%;
    height: 80px;
    cursor: pointer;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    margin-bottom: 10px;
    padding: 0 5px;
    text-align: center;
    overflow: hidden;
    background: #f5f5f5;
    color: rgb(0 0 0);
}
</style>
  